import React, { FC, useEffect, useState } from "react"
import "./questionCard.css"

type PropsType = {
  id: string
  title: string
  isPublished: boolean
  remove?: (id: string) => void
  modify?: (id: string) => void
}

const QuestionCard: FC<PropsType> = (props) => {
  const { id, title, isPublished, remove, modify } = props

  return (
    <div className="question-card">
      <span>{title}</span>
      {isPublished ? (
        <span className="status" style={{ color: "green" }}>
          已发布
        </span>
      ) : (
        <span className="status">未发布</span>
      )}
      <button>编辑问卷</button>
      <button
        className="remove"
        onClick={() => {
          remove && remove(id)
        }}
      >
        删除问卷
      </button>
      <button
        className="modify"
        onClick={() => {
          modify && modify(id)
        }}
      >
        修改问卷
      </button>
    </div>
  )
}

export default QuestionCard
